<template>
    <div>
      <my-header title="添加好友/群">
        <img @click="$router.back()" src="../../assets/img/message/back_left.png" slot="imgLeft"/>
        <!--<img @click="$router.back()" src="../../assets/img/contacts/add.png" slot="imgRight"/>-->
      </my-header>
      <div style="height: 40px;margin-top: 5px;background: #4accfb;padding-top: 5px;box-sizing: border-box">
        <div style="display:flex;color: #4accfb;background: white;width: 200px;height: 30px;padding: 1px;border-radius: 50px;margin: 0 auto">
          <div @click="changeActive(1)" :class="{noActive:currentActive!=1}" style="flex: 1;width: 100px;height: 30px;line-height:30px;text-align:center;border-radius: 50px 0 0 50px">
            找人
          </div>
          <div @click="changeActive(2)" :class="{noActive:currentActive!=2}" style="flex: 1;width: 100px;height: 30px;line-height:30px;text-align:center;border-radius: 0 50px 50px 0">
            找群
          </div>
        </div>
      </div>
      <div style="border-top:0.1px solid #f2f2f2;background: white;height: 40px;padding: 5px;box-sizing: border-box;">
        <div style="display:flex;align-items:center;background: #eeeeee;height: 100%;border-radius: 50px;padding: 1px 15px">
          <div style="height: 20px;width: 20px;">
            <img style="height: 100%;width: 100%" src="">
          </div>
          <div style="flex: 1;height: 25px">
            <input @keyup.enter="searchUserOrRoom(searchStr)" v-model="searchStr" :placeholder="currentActive==1?'输入邮箱':'输入群号'" style="outline: none;width:100%;height: 25px;border: 0;padding: 0;margin: 0;background: #eeeeee"/>
          </div>
        </div>
      </div>
      <div style="height: calc(100vh - 50px);overflow: scroll;">
        <div v-show="currentActive==1">
          <div @click="addFriendApply(searchRes.status)" v-show="searchRes.status!=-1" style="display: flex;align-items:center;border-top:0.1px solid #f2f2f2;background: white;height: 50px;padding: 5px;box-sizing: border-box;">
            <div style="height: 36px;width: 36px">
              <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
            </div>
            <div style="flex: 1;margin-left: 5px">
              <div style="height: 24px;font-size: 20px">
                {{searchRes.friendUserInfo.nickname}}
                (<span style="color: #4accfb">{{searchRes.friendUserInfo.email}}</span>)
              </div>
              <div style="height: 12px;font-size: 10px;color: #b6b6b6">
              </div>
            </div>
            <div :style="{background:getColorStr(searchRes.status)}" style="height: 30px;line-height:30px;border-radius: 50px;padding: 2px 15px;font-size: 13px;color: #333333;margin-right: 5px;">
              {{getStatusStr(searchRes.status)}}
            </div>
          </div>
        </div>
        <div v-show="currentActive==2">
          目前没有
        </div>
      </div>
      <my-toast v-model="showToast" :toast-msg="toastMsg" :toast-time="toastTime"></my-toast>
    </div>
</template>

<script>
  import {selectUserBeforeApplyFriend} from '../../util/requestAll/addfriend'
    export default {
        name: "AddFriend",
      data(){
          return {
            currentActive:1,//1:好友；2:群
            searchStr:'',//搜索字符串
            showToast:false,
            toastMsg:'',
            toastTime:2000,
            searchRes:{
              friendUserInfo:{
                nickname:'xxx',
                email:'xxx',
              },
              status:-1,
            },
          }
      },
      computed:{
        getStatusStr(){
          return (status)=>{
            switch (status) {
              case 1:
                return '没有该用户'
              case 2:
                return '待对方验证'
              case 3:
                return '已添加'
              case 4:
                return '待自己同意'
              case 5:
                return '已添加'
              case 6:
                return '添加'//没有关系
              default:
                return '待对方验证'
            }
          }
        },
        getColorStr(){
          return (status)=>{
            switch (status) {
              case 1:
                return '#f2f2f2'
              case 2:
                return '#f2f2f2'
              case 3:
                return '#f2f2f2'
              case 4:
                return '#f2f2f2'
              case 5:
                return '#f2f2f2'
              case 6:
                return '#f2f2f2'
              default:
                return '#f2f2f2'
            }
          }
        },
      },
      methods:{
        showMyToast(toastMsg,toastTime){
          this.toastMsg=toastMsg
          this.toastTime=toastTime
          this.showToast=true
        },
        changeActive(status){
          this.currentActive=status
          this.searchStr=''
        },
        searchUserOrRoom(searchStr){
          let _this=this
          if(!this.searchStr){
            this.showMyToast('为空，小样！',2000)
            return
          }
          if(this.currentActive==1){
            let userId=this.$store.state.userInfo.id
            let friendEmail=this.searchStr
            selectUserBeforeApplyFriend({
              user_id:userId,
              friend_email:friendEmail
            }).then((data)=>{
              let res=data.data
              if(res.status==1){
                _this.showMyToast('没有该用户！',2000)
              }else {
                _this.searchRes=res;
              }
              // console.log(data)
            })
          }else if(this.currentActive==2){
            this.showMyToast('敬请期待！',2000)
          }
        },
        addFriendApply(status){
          switch (status) {
            case 1:
              this.showMyToast('敬请期待！',2000);
              break
            case 2:
              this.showMyToast('敬请期待！',2000);
              break
            case 3:
              this.showMyToast('敬请期待！',2000);
              break
            case 4:
              this.showMyToast('敬请期待！',2000);
              break
            case 5:
              this.showMyToast('敬请期待！',2000);
              break
            case 6://添加
              let friendUserInfo=this.searchRes.friendUserInfo
              // this.showMyToast('添加！',2000);
              // this.$router.push('/SendApplyFriend')
              this.$router.push({
                name: 'SendApplyFriend',
                params: friendUserInfo
              })
              break
            default:
              this.showMyToast('敬请期待！',2000);
              break
          }
        }
      },
      created(){
        let email=this.$route.params.email
        // console.log(email)
        if(email){
          this.searchStr=email
          this.searchUserOrRoom(email);
        }
      }
    }
</script>

<style scoped>
.noActive{
  color: white;
  background: #4accfb;
}
</style>
